<!-- 薪资排行 -->
<template>
	<view class="page" v-if="my == 'true'">
		<u-navbar title="实名认证"></u-navbar>
		<view class="step-box">
			<u-steps :list="numList" :current="step"></u-steps>
		</view>
		<view class="form-box">
			<u-modal v-model="noteShow" title="注意事项" confirmText="我已知晓" @confirm="noteShow = false"
				@close="noteShow = false">
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
			<u-modal v-model="payShow" title="认证费用说明" confirmText="我已知晓" @confirm="payShow = false"
				@close="payShow = false">
				<view class="slot-content">
					<rich-text :nodes="content2"></rich-text>
				</view>
			</u-modal>
			<view class="photo-box">
				<view class="card-title">
					<view>上传身份证照片</view>
					<view class="card-title-tip" @click="noteShow = true">
						<u-icon name="error-circle-fill" color="#eca419" size="36"></u-icon>
						<view class="tip-text">注意事项</view>
					</view>
				</view>
				<view class="id-card-box">
					<view class="slot-btn" @click="chooseImage">
						<view class="id-card-bg">
							<image v-if="vuex_user.idCardFront" :src="vuex_user.idCardFront"></image>
							<image v-else src="/static/style-three/idcard-front.png"></image>
						</view>
						<view class="id-card-btn">拍摄身份证正面</view>
					</view>
					<view class="slot-btn" @click="chooseImageBack">
						<view class="id-card-bg">
							<image v-if="vuex_user.idCardBack" :src="vuex_user.idCardBack"></image>
							<image v-else src="/static/style-three/idcard-front.png"></image>
						</view>
						<view class="id-card-btn">拍摄身份证反面</view>
					</view>
				</view>
			</view>
			<view class="form-page">
				<view class="form-item">
					<view class="form-label">姓名</view>
					<view v-if="vuex_user.idName == ''" class="form-set">未知</view>
					<view v-else class="form-text">{{vuex_user.idName}}</view>
				</view>
				<u-line></u-line>
				<view class="form-item">
					<view class="form-label">身份证号</view>
					<view v-if="vuex_user.idNumber == ''" class="form-set">未知</view>
					<view v-else class="form-text">{{vuex_user.idNumber}}</view>
				</view>
				<u-line></u-line>
				<view class="form-item">
					<view class="form-label">有效期</view>
					<view v-if="vuex_user.idDateLimit == ''" class="form-set">未知</view>
					<view v-else class="form-text">{{vuex_user.idDateLimit}}</view>
				</view>
				<u-line></u-line>
				<view class="form-item">
					<view class="form-label">手机号</view>
					<view v-if="vuex_user.phonenumber == ''" class="form-set" @click="nickname">未知</view>
					<view v-else class="form-text">{{vuex_user.phonenumber}}</view>
				</view>
			</view>
		</view>
		
		<view class="btn-box">
			<view class="pay-tip">
				<view class="card-title-tip" @click="payShow = true">
					<u-icon name="error-circle-fill" color="#eca419" size="36"></u-icon>
					<view class="tip-text">认证费用说明</view>
				</view>
			</view>
			<u-button disabled v-if="vuex_user.idCardStatus == '1'" shape="circle" type="success">认证成功</u-button>
			<u-button v-else @click="getPhoneNumber" shape="circle" type="success">提交认证</u-button>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		
		<u-popup mode="bottom" v-model="ageShow">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 300rpx;">
					<view>
						<view class="age-label">年龄：{{age}}</view>
						<u-slider v-if="ageShow" min="12" max="80" v-model="age"></u-slider>
					</view>
				</scroll-view>
				<view class="confrim-btn">
					<u-button type="primary" @click="updateAge">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="wechatShow" mode="bottom" border-radius="14">
			<wechat-pop @cannel="wechatShow = false"></wechat-pop>
		</u-popup>
		
		<card-pay></card-pay>
			
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import wechatPop from "@/pages/me/wechat.vue";	//微信号
	export default {
		components: {
			wechatPop
		},
		data() {
			var token = 'Bearer ' + uni.getStorageSync('token');
			var action = this.website.baseUrl + '/system/user/profile/idCardFront';
			var actionBack = this.website.baseUrl + '/system/user/profile/idCardBack';
			var uploadAction = this.website.baseUrl + '/oss/oss/upload';
			return {
				age: 18,
				formData: {},
				action: action,
				actionBack: actionBack,
				uploadAction: uploadAction,
				header: {
					'Authorization': token
				},
				ageShow: false,
				wechatShow: false,
				actionSheetShow: false,
				actionSheetList: [
					{
						text: '男',
						value: '0',
					},
					{
						text: '女',
						value: '1',
					},
				],
				photoList: [],
				fileList: [],
				my: 'false',
				login: {
					appId: '',
					encryptedData: '',
					code: '',
					iv: ''
				},
				step: 0,
				numList: [{
					name: '手机认证'
				}, {
					name: '实名认证'
				}, {
					name: '认证成功'
				}],
				noteShow: false,
				payShow: false,
				content: `<div>1、大陆公民持本人有效的<span style="color: #ff5050;">二代身份证</span></div><div>2、拍摄时确保身份证<span style="color: #ff5050;">边框完整，字体清晰，亮度均匀</span></div>`,
				content2: `<div>1、为了防止诈骗、色情、赌博、拐卖等非法活动，需要进行实名认证<span style="color: #ff5050;">身份证号码，姓名，手机号</span>必须一致</div><div>2、因为认证需要调用第三方服务产生费用，所以收取认证费<span style="color: #ff5050;">1元/次</span></div>`
			}
		},
		onLoad(option) {
			this.init();
			this.my = option.my;
		},
		created() {
			this.getCode();
		},
		computed: {
			...mapState(['vuex_user','chat_flag']),
		},
		methods: {
			init() {
				this.judgeLogin((rs) => {
					if(rs.user.phonenumber != ''){
						this.step = 1;
					}
					if(rs.user.idCardStatus == '1'){
						this.step = 2;
					}
				});
			},
			nickname() {
				this.$u.route({
					url: 'packgeMine/pages/me/nickname',
				});
			},
			wechat() {
				this.$u.route({
					url: 'packgeMine/pages/me/wechat',
				});
			},
			signname() {
				this.$u.route({
					url: 'packgeMine/pages/me/signname',
				});
			},
			profession() {
				this.$u.route({
					url: 'packgeMine/pages/me/profession',
				});
			},
			hobby() {
				this.$u.route({
					url: 'packgeMine/pages/me/hobby',
				});
			},
			handerChooseLocation () {
			  uni.chooseLocation({
			    success: (res) => {
					this.updateLocation(res.latitude, res.longitude);
			    },
			    fail: function (err) {
			        console.log('取消按钮', err)
			    }
			  })
			},
			introduce() {
				this.$u.route({
					url: 'packgeMine/pages/me/introduce',
				});
			},
			getPhoneNumber() {
				this.$u.post('/system/user/idCard').then(res => {
					this.$u.toast('认证成功');
					this.init();
				})
			},
			getCode() {
				const _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.login.code = loginRes.code;
					},
					fail: function() {
						
					}
				});
			},
			updateIdCardFront(image) {
				uni.uploadFile({
					url: this.action,
					filePath: image.path,
					name: 'idCardFile',
					formData: this.formData,
					header: this.header,
					success: res => {
						var data = res.data;
						data = JSON.parse(data);
						if(data.code == 200){
							this.$u.toast('上传成功');
							var user = this.vuex_user;
							user.idCardFront = data.imgUrl;
							this.$store.commit('setUser', user);
						}else{
							this.$u.toast(data.msg);
						}
					},
					fail: e => {
						this.$u.toast('上传失败');
					}
				});
			},
			updateIdCardBack(image) {
				uni.uploadFile({
					url: this.actionBack,
					filePath: image.path,
					name: 'idCardFile',
					formData: this.formData,
					header: this.header,
					success: res => {
						var data = res.data;
						data = JSON.parse(data);
						if(data.code == 200){
							this.$u.toast('上传成功');
							var user = this.vuex_user;
							user.idCardBack = data.imgUrl;
							this.$store.commit('setUser', user);
						}else{
							this.$u.toast(data.msg);
						}
					},
					fail: e => {
						this.$u.toast('上传失败');
					}
				});
			},
			//选照片 or 拍照
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									this.updateIdCardFront(image);
								}
							});
						}
					}
				});
			},
			//选照片 or 拍照
			chooseImageBack() {
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['camera'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: (image) => {
									this.updateIdCardBack(image);
								}
							});
						}
					}
				});
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				var sex = this.actionSheetList[index].value;
				this.$u.put('/system/user/profile',{
					sex: sex
				}).then(res => {
					var user = this.vuex_user;
					user.sex = sex;
					this.$store.commit('setUser', user);
				})
			},
			updateLocation(lat,lng) {
				this.$u.put('/system/user/profile',{
					lat: lat,
					lon: lng,
				}).then(res => {
					this.$u.toast('位置修改成功');
				})
			},
			updateAge() {
				this.$u.put('/system/user/profile',{
					age: this.age
				}).then(res => {
					var user = this.vuex_user;
					user.age = this.age;
					this.$store.commit('setUser', user);
					this.ageShow = false;
				})
			},
			onSuccess(e) {
				if(e.code == 200){
					var url = e.data;
					this.fileList.push(url);
					var albums = this.fileList.join(",");
					this.$u.put('/system/user/profile',{
						albums: albums
					}).then(res => {
						this.$u.toast('图片上传成功');
						this.getImageList(albums);
					});
				}else{
					this.$u.toast(e.msg);
				}
			},
			getImageList(albums) {
				var albumList = albums.split(',');
				var user = this.vuex_user;
				user.albums = albums;
				this.$store.commit('setUser', user);
				this.$store.commit('setAlbums', albumList);
			},
			onRemove(index) {
				this.fileList.splice(index, 1); 
				var albums = this.fileList.join(",");
				this.$u.put('/system/user/profile',{
					albums: albums
				}).then(res => {
					this.$u.toast('图片删除成功');
					this.getImageList(albums);
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f9f8f8;
	}
	.slot-wrap {
		padding-left: 10px;
	}
	.form-box {
		padding: 15px;
	}
	.avatar {
		position: relative;
	}
	.avatar-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
	}
	.avatar-icon {
		position: absolute;
		bottom: 20rpx;
		right: 0px;
		background: #303133;
		padding: 10rpx 12rpx;
		border-radius: 100px;
	}
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 0;
	}
	.form-label {
		font-size: 32rpx;
		width: 100px;
	}
	.form-text {
		font-size: 30rpx;
		color: #817e7e;
		display: flex;
		justify-content: flex-end;
		flex: 1;
		line-height: 15px;
	}
	.form-set {
		font-size: 30rpx;
		color: #929292bd;
		display: flex;
		justify-content: flex-end;
		flex: 1;
		line-height: 15px;
	}
	.mh {
		min-height: 100px;
	}
	.form-page {
		padding: 15px;
		background-color: #fff;
		margin-top: 15px;
		border-radius: 10px;
	}
	.photo-box {
		background-color: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
	}
	.card-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}
	.card-title-tip {
		margin-left: 5px;
		font-size: 28rpx;
		color: #eca419;
		display: flex;
		align-items: center;
	}
	.tip-text {
		font-size: 24rpx;
	}
	.id-card-box {
		display: flex;
	}
	.slot-btn {
		margin-right: 20rpx;
	}
	.slot-btn image {
		width: 250rpx;
		height: 150rpx;
	}
	.id-card-btn {
		background-color: #5581ff;
		display: flex;
		justify-content: center;
		padding: 5px;
		color: #fff;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.id-card-bg {
		background-color: #f4f8fe;
		padding: 10px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.step-box {
		padding-top: 15px;
	}
	.content {
		padding: 15px;
	}
	.age-label {
		font-size: 14px;
		margin-bottom: 15px;
	}
	.btn-box {
		padding: 0 15px;
		padding-bottom: 30px;
	}
	.pay-tip {
		padding-bottom: 15px;
	}
	.slot-content {
		padding: 10px 20px;
		font-size: 30rpx;
		border-bottom: 1px solid rgb(214, 215, 217);
	}
</style>
